<template>
  <div class="horv-sreen-layout">
    <div class="layout-content">
      <div class="layout-content-header">
        <moduleOverView :overviewData="overviewData"> </moduleOverView>
      </div>
      <div class="layout-content-footer">
        <div class="layout-content-left">
          <moduleleftView height="1.72rem" :overviewData="leftoverviewData">
          </moduleleftView>
          <moduleleftTwoView height="1.79rem" style="margin-top: 0.2rem;" :overviewData="leftoverviewData"
            :pieData="pieData">
          </moduleleftTwoView>
        </div>
        <div class="layout-content-right">
          <modulerightTwoView height="3.72rem"  :overviewData="overviewData">
          </modulerightTwoView>
          <!-- <modulerightOneView height="3.52rem" :overviewData="overviewData">
          </modulerightOneView> -->

        </div>
      </div>
      <div class="layout-content-bootom">
        <modulerightOneView height="3.02rem" :overviewData="overviewData">
        </modulerightOneView>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, onBeforeUnmount, ref } from "vue";
import moduleHeader from "@/components/vpt-base-header-1002/index.vue";
import moduleOverView from "./component/over-view/index.vue";
import moduleleftView from "./component/over-view/leftOne.vue";
import moduleleftTwoView from "./component/over-view/leftTwo.vue";
import modulerightOneView from "./component/over-view/rightOne.vue";
import modulerightTwoView from "./component/over-view/rightTwo.vue";
import {
  getAppUsageRateData,
  getLeftUsageRateData,
  getPieData,
} from "@/api/mockApi/cloudResources.js";
import { addThousandsSeparator } from "@/utils/formatter.js";
import moduleMonitoring from "./component/monitoring/index.vue";
import { usePeriodicRequest } from "@/utils/usePeriodicRequest.js";
import moduleActiveUser from "@/pages/components/active-user/index.vue";
import moduleTrace from "@/pages/components/trace-1005/index.vue";
import {
  getIPSelectData,
  getOverviewData,
  getLineChartData,
} from "@/api/mockApi/infrastructure.js";
import { useRouter } from "vue-router";
import { buttonGroup } from "@/router/data.js";

const router = useRouter();

// const buttonGroup = ref([
//   { id: 1, name: "总览", path: "/horvsreen", disabled: false },
//   { id: 2, name: "基础设施监控", path: "/infrastructure", disabled: false },
//   { id: 3, name: "应用监控", path: "/application", disabled: false },
// ]);

const handleMenu = (item) => {
  router.push({ path: item.path });
};

const overviewData = ref([]);
//获取数据总览
const getOverview = (params = {}) => {
  getAppUsageRateData(params).then((res) => {
    overviewData.value = res.data || [];
    const cpu_info = JSON.parse(res.data[0]?.cpu_info);
    const disk_info = JSON.parse(res.data[0]?.disk_info);
    const mem_info = JSON.parse(res.data[0]?.mem_info);
    overviewData.value = [
      {
        title: "CPU",
        name: "总核数",
        centerFontColor:
          cpu_info.cpu_usage >= 80
            ? "#f53f3f"
            : cpu_info.cpu_usage >= 50
            ? "#fabf01"
            : "#00B675",
        percentageValue: cpu_info.cpu_usage || "-",
        percentageDrag: cpu_info.cpu_usage_wsy || 0,
        percentageColor: [
          cpu_info.cpu_usage >= 80
            ? "#f53f3f"
            : cpu_info.cpu_usage >= 50
            ? "#fabf01"
            : "#00B675",
          "#f1f6fa",
        ],
        total: addThousandsSeparator(cpu_info.vcpu_total) + "核" || "-",
        used: addThousandsSeparator(cpu_info.cpu_used) + "核" || "-",
        dp_num: addThousandsSeparator(cpu_info.cpu_dp_num),
        gp_num: addThousandsSeparator(cpu_info.cpu_gp_num),
        di_type: addThousandsSeparator(cpu_info.di_type),
        ga_type: addThousandsSeparator(cpu_info.ga_type),
      },
      {
        title: "内存",
        name: "总内存",
        centerFontColor:
          mem_info.memory_usage >= 80
            ? "#f53f3f"
            : mem_info.memory_usage >= 50
            ? "#fabf01"
            : "#00B675",
        percentageValue: mem_info.memory_usage || "-",
        percentageDrag: mem_info.memory_usage_wsy || 0,
        percentageColor: [
          mem_info.memory_usage >= 80
            ? "#f53f3f"
            : mem_info.memory_usage >= 50
            ? "#fabf01"
            : "#00B675",
          "#f1f6fa",
        ],
        // total: addThousandsSeparator(Number((mem_info.memory_total / 1024).toFixed(2))) + "GB" || "-",
        // used: addThousandsSeparator(Number((mem_info.memory_used / 1024).toFixed(2))) + "GB" || "-",
        total: addThousandsSeparator(mem_info.memory_total) + "GB",
        used: addThousandsSeparator(mem_info.memory_used) + "GB",
        dp_num: addThousandsSeparator(mem_info.mem_dp_num),
        gp_num: addThousandsSeparator(mem_info.mem_gp_num),
        di_type: addThousandsSeparator(mem_info.di_type),
        ga_type: addThousandsSeparator(mem_info.ga_type),
      },
      {
        title: "存储",
        name: "总存储",
        centerFontColor:
          disk_info.disk_used_percent >= 80
            ? "#f53f3f"
            : disk_info.disk_used_percent >= 50
            ? "#fabf01"
            : "#00B675",
        percentageValue: disk_info.disk_used_percent || "-",
        percentageDrag: disk_info.disk_used_percent_wsy || 0,
        percentageColor: [
          disk_info.disk_used_percent >= 80
            ? "#f53f3f"
            : disk_info.disk_used_percent >= 50
            ? "#fabf01"
            : "#00B675",
          "#f1f6fa",
        ],
        total: addThousandsSeparator(disk_info.disk_total) + "TB",
        used: addThousandsSeparator(disk_info.disk_used) + "TB",
        dp_num: addThousandsSeparator(disk_info.disk_dp_num),
        gp_num: addThousandsSeparator(disk_info.disk_gp_num),
        di_type: addThousandsSeparator(disk_info.di_type),
        ga_type: addThousandsSeparator(disk_info.ga_type),
      },
    ];
  });
};

const leftoverviewData = ref([]);
//获取云主机类型、云资源信创情况数据
const getleftOverview = (params = {}) => {
  getLeftUsageRateData(params).then((res) => {
    leftoverviewData.value = res.data || [];
  });
};

const pieData = ref([]);
//获取信创饼图数据
const getpieDataList = (params = {}) => {
  getPieData(params).then((res) => {
    pieData.value = res.data || [];
    pieData.value.map((item, index) => {
      item.value = addThousandsSeparator(item.num);
      item.name = item.type;
      item.itemStyle = {
        color: item.color,
        borderWidth: 2,
      };
    });
  });
};

// tabs数据
const defaultTabs = ref("01");

// select数据
const defaultValue = ref("");
const ipSelectData = ref([]);

// 获取ip下拉数据
const getIPSelect = (params = { bh: defaultTabs.value }) => {
  getIPSelectData(params).then((res) => {
    ipSelectData.value = res.data?.length
      ? res.data.map((item) => ({
          label: item.app_ip || "",
          value: item.app_ip || "",
        }))
      : [];
    defaultValue.value = ipSelectData.value[0].value;
    getLineChart({
      type: defaultTabs.value,
      ip: defaultValue.value,
    });
  });
};

const chartType = ref("init");

const monitoringData = ref([]);

// 获取监控数据chart
const getLineChart = (params) => {
  getLineChartData(params).then((res) => {
    // monitoringData.value = res.data || [];
    setTimeout(() => {
      chartType.value = "update";
    }, 0);
  });
};

const lineChart = usePeriodicRequest(getLineChart, 300000);

const overviewList = usePeriodicRequest(getOverview, 300000);
const overviewleftList = usePeriodicRequest(getleftOverview, 300000);
const pieDataList = usePeriodicRequest(getpieDataList, 300000);
onMounted(() => {
  getIPSelect();
  getLineChart({
    type: defaultTabs.value,
    ip: defaultValue.value,
  });
  getOverview();
  getleftOverview();
  getpieDataList();
});

// 在组件卸载时停止请求
onBeforeUnmount(() => {});
</script>

<style lang="less" scoped>
.horv-sreen-layout {
    // height: 100%;
     background: #f2f3f5;

    .layout-content {
        // height: 2.68rem;
        padding: 0.2rem;
        box-sizing: border-box;
        padding-bottom: 0;

    }

    .layout-content-header {
        display: flex;
        height: 2.2rem;

        .app-moniter-container,
        // .bns-container {
        //     width: 5.78rem;
        // }

        .base-new-container,
        .app-moniter-container {
            margin-right: 0.2rem !important;
        }

        .base-new-container {
        }

        .bns-container {
            :deep(.sm-data-echarts-layout) {
                height: 100%;
                flex-direction: column;

                .bns-container {
                    display: flex;
                    width: 100%;

                    .dv-wrapper {
                        flex: 1;

                        &:first-child {
                            box-shadow: none;
                        }
                    }
                }
            }
        }
    }

    .layout-content-footer {
        display: flex;
        // align-items: center;
        // height: 3.9rem;
        margin-top: 0.16rem;

        .active-user-container,
        .trace-container {
          width: 12.98rem;
        }

        .active-user-container {
            margin-right: 0.16rem;
        }

        .layout-content-left {
          // width: 5.62rem;
          margin-right: 0.16rem;
          // .app-table {
          //   margin-top: 0.2rem;
          // }
        }
        .layout-content-right {
          // width: 12.98rem;

        }
    }
    .layout-content-bootom{
      margin-top: 0.16rem;
    }
}
</style>
